<script setup>

import {nextTick, onMounted, ref} from "vue";
  import {useRouter} from "vue-router";
  import axios from "axios";

  const router = useRouter();
  const resourseList = ref([]);

  const loadResource = async () => {

  }

  const loading = ref(false);

  const clickItem = (item) => {
    if(item.hasOwnProperty('resourceType') && item.resourceType=='camera'){
      router.push({path:'/video',query:{id:item.id}})
    }else{
      router.push({path:'/resource',query:{id:item.id}})
    }
  }

  const loadData = ()=>{
    let that = this
    let video = that.$refs.videos
    let scale = 0.3 // 压缩比率 0.1~1
    let canvas = document.createElement('canvas')
    let width = video.videoWidth*scale
    let height = video.videoHeight*scale
    console.log(width, height)
    const MIN_WIDTH = 375
    if (width < MIN_WIDTH) {
      // 做最小值处理
      height = height*MIN_WIDTH/width
      width = MIN_WIDTH
    }
    canvas.width = width
    canvas.height = height
    canvas.getContext('2d').drawImage(video, 0, 0, width, height)
    let image = canvas
        .toDataURL('image/png')
        .replace('image/png', 'image/octet-stream')
    // 输出视频封面
    this.speedImgUrl = image
  }

  onMounted(async () => {
    axios.get('/api/video/getvideos').then(res => {
      console.log(res);
    });
  });

</script>

<template>
  <div style="background: linear-gradient(267.64deg, #90CAFE 1.65%, #E0EEFF 94.92%);width:100%;height:4em;">
    <span style="font-size: 1.5em;color: #3399ff;margin-left: 1em;margin-top:2em;line-height: 2.5em;">乡村视频</span>
  </div>
<!--  <van-cell-group inset>-->
<!--    <van-empty v-if="resourseList.length==0" description="暂无数据" />-->
<!--    <van-list v-else-->
<!--              :loading="loading"-->
<!--              @load="loadResource"-->
<!--    >-->
<!--      <van-cell v-for="(item,index) in resourseList"-->
<!--                :key = "index"-->
<!--                :title="item.name"-->
<!--                :icon = "item.hasOwnProperty('resourceType') && item.resourceType=='camera'?'video-o':'idcard'"-->
<!--                size = "large"-->
<!--                @click="clickItem(item)"-->
<!--      >-->
<!--        <template #right-icon>-->
<!--          <van-icon v-if="!item.hasOwnProperty('resourceType')" name="arrow"></van-icon>-->
<!--        </template>-->
<!--      </van-cell>-->
<!--    </van-list>-->
<!--  </van-cell-group>-->

  <video id="video" ref="videos" type="video/mp4"
         style="width: 100%;height: 100%"
         controls="controls"
         preload="auto" :src="bvideoUrl"
         @loadeddata="loadeddata"
         webkit-playsinline="true"
         autoplay
         playsinline="true"
         x5-video-player-type="h5"
         x5-playsinline="true"
         x5-video-player-fullscreen='true'
         x-webkit-airplay="allow"
         x5-video-orientation="portraint">
    您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
  </video>

</template>

<style scoped>

</style>